<template>
  <div class="about">
    <el-button type="success" @click="processing()">一键生成</el-button>
    <div>
      <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
        <el-table-column v-for="(item, index) in dynamicColumns" :key="index" :prop="item.prop">
          <template slot="header">
            {{ item.label }}
          </template>
          <template slot-scope="scope">
            {{ scope.row.custom[item.prop].type }}
          </template>
        </el-table-column>
        <el-table-column prop="kucun" label="库存"></el-table-column>
        <el-table-column prop="moany" label="金钱"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
  <script>
export default {
    data() {
        return {
            dynamicColumns: [], // 存放动态列
            shopType: [
                {
                    name: "颜色",
                    id: 1,
                    typeNames: [
                        { type: "红色", img: "", id: 11, pId: 1, pName: "颜色" },
                        { type: "白色", img: "", id: 12, pId: 1, pName: "颜色" },
                    ]
                },
                {
                    name: "材料",
                    id: 2,
                    typeNames: [
                        { type: "棉花", img: "", id: 21, pId: 2, pName: "材料" },
                        { type: "纱布", img: "", id: 22, pId: 2, pName: "材料" },
                    ]
                },
                {
                    name: "尺码",
                    id: 3,
                    typeNames: [
                        { type: "L", img: "", id: 31, pId: 3, pName: "尺码" },
                        { type: "XL", img: "", id: 32, pId: 3, pName: "尺码" },
                    ]
                }
            ],
            newList: [],
            newData: [],
            tableData: [],
            spanArr: []
        };
    },
    methods: {
        descartes(array) {
            if (array.length < 2) return array[0] || [];
            return [].reduce.call(array, function (col, set) {
                let res = [];
                col.forEach(function (c) {
                    set.forEach(function (s) {
                        let t = [].concat(Array.isArray(c) ? c : [c]);
                        t.push(s);
                        res.push(t);
                    })
                });
                return res;
            });
        },
        //处理数据
        processing() {
            this.newData = [];
            this.dynamicColumns = [];
            for (let i = 0; i < this.shopType.length; i++) {
                this.dynamicColumns.push({ prop: this.shopType[i].name, label: this.shopType[i].name });
                let newlist = [];
                for (let index = 0; index < this.shopType[i].typeNames.length; index++) {
                    newlist.push(this.shopType[i].typeNames[index]);
                }
                this.newData.push(newlist);
            }
            this.getList();
        },
        //转换数据
        getList() {
            this.tableData = [];
            this.newList = this.descartes(this.newData);
            for (let index = 0; index < this.newList.length; index++) {
                let tempCustom = {}
                for (let item of this.newList[index]) {
                    tempCustom[item['pName']] = item
                }
                this.tableData.push({
                    custom: tempCustom,
                    kucun: "1",
                    moany: "2"
                });
            }
            this.getSpanArr(this.tableData);
        },
        getSpanArr(data) { //计算位置的方法
            this.spanArr = []
            for (let item of this.shopType) {
                let pos = 0
                let tempSpanArr = []
                for (let i = 0; i < data.length; i++) {
                    if (i === 0) {
                        tempSpanArr.push(1);
                        pos = 0;
                    } else {
                        // 判断当前元素与上一个元素是否相同(对象比对可能不正确,可通过对象中的属性值进行比对)
                        if (data[i]['custom'][item['name']] === data[i - 1]['custom'][item['name']]) {
                            tempSpanArr[pos] += 1;
                            tempSpanArr.push(0);
                        } else {
                            tempSpanArr.push(1);
                            pos = i;
                        }
                    }
                }
                this.spanArr.push(tempSpanArr)
            }
        },
        // 合并行数
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex < this.spanArr.length - 1) {
                const _row = this.spanArr[columnIndex][rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        }
    }
};
  </script>